<template>
	<view class="choose-page">
		<checkbox-group @change="changeImage">
			<view class="choose-title">勘察记录图片</view>
			<view class="image-box">
				<view v-for="(img, index) in surveyList" :key="index" class="image-item">
					<checkbox :value="img" :checked="photoList.includes(img)"
						:disabled="photoList.length >= 9 && !photoList.includes(img)" class="check" />
					<image :src="img" mode="aspectFill" @click="preView(img, surveyList)" />
				</view>
			</view>
			<view class="choose-title">维修记录图片</view>
			<view class="image-box">
				<view v-for="(img, index) in repairList" :key="index" class="image-item">
					<checkbox :value="img" :checked="photoList.includes(img)"
						:disabled="photoList.length >= 9 && !photoList.includes(img)" class="check" />
					<image :src="img" mode="aspectFill" @click="preView(img, repairList)" />
				</view>
			</view>
			<view class="choose-title">保养记录图片</view>
			<view class="image-box">
				<view v-for="(img, index) in maintainList" :key="index" class="image-item">
					<checkbox :value="img" :checked="photoList.includes(img)"
						:disabled="photoList.length >= 9 && !photoList.includes(img)" class="check" />
					<image :src="img" mode="aspectFill" @click="preView(img, maintainList)" />
				</view>
			</view>
			<view class="choose-title">问题描述图片</view>
			<view class="image-box">
				<view v-for="(img, index) in warrantyPicture" :key="index" class="image-item">
					<checkbox :value="img" :checked="photoList.includes(img)"
						:disabled="photoList.length >= 9 && !photoList.includes(img)" class="check" />
					<image :src="img" mode="aspectFill" @click="preView(img, warrantyPicture)" />
				</view>
			</view>
			<view v-if="tempList.length" class="choose-title">临时上传图片</view>
			<view v-if="tempList.length" class="image-box">
				<view v-for="(img, index) in tempList" :key="index" class="image-item">
					<checkbox :value="img" :checked="photoList.includes(img)"
						:disabled="photoList.length >= 9 && !photoList.includes(img)" class="check" />
					<image :src="img" mode="aspectFill" @click="preView(img, tempList)" />
				</view>
			</view>
		</checkbox-group>
		<view>
			<view class="add-image" @click="handleUploadImage">
				<uni-icons type="camera" size="30" color="#fff" />
			</view>
		</view>
		<view style="height: 100rpx" />
		<view class="confirm" @click="handleSave">确定</view>
	</view>
</template>
<script>
	import baseUrl from "@/request/baseUrl.js";
	export default {
		name: "choosePhoto",
		data() {
			return {
				surveyList: [], // 概况图片
				repairList: [], // 修复图片
				tempList: [], // 临时上传图片
				wid: "", // 工单ID
				photoList: [], // 已选图片数组
				maintainList: [],
				warrantyPicture:[]
			};
		},
		onLoad(e) {
			this.wid = e.warranty_id;
			this.getList();
			let temp = uni.getStorageSync("statement-temp");
			if (temp) this.tempList = temp;
		},
		onShow() {
			let photo = uni.getStorageSync("statement-photo");
			if (photo) this.photoList = photo;
		},
		methods: {
			// 获取图片列表
			getList() {
				this.$https
					.post("/warranty/getPicture", {
						wid: this.wid,
					})
					.then((res) => {
						this.repairList = res.data.repairPicture;
						this.surveyList = res.data.surveyPicture;
						this.maintainList = res.data.maintainPicture
						this.warrantyPicture = res.data.warrantyPicture
					});
			},
			// 选择图片
			changeImage(e) {
				this.photoList = e.detail.value;
			},
			// 预览图片
			preView(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls,
				});
			},
			// 上传图片
			handleUploadImage() {
				uni.chooseLocation({
					success: (openRes) => {
						let addsy_txt = openRes.address + openRes.name
						uni.chooseImage({
							count: 9,
							sizeType: ["compressed"],
							sourceType: ["album", "camera"],
							success: async (res) => {
								const token = uni.getStorageSync("userInfo").token;
								for (const item of res.tempFilePaths) {
									this.tempList.push(await this.uploadImage(token,
										item, addsy_txt))
								}
								
								// res.tempFilePaths.forEach((item) => {
									// uni.uploadFile({
									// 	url: `${baseUrl}api/common/upload`,
									// 	filePath: item,
									// 	name: "file",
									// 	formData: {
									// 		token: token,
									// 		addsy_txt
									// 	},
									// 	success: async (res1) => {
									// 		let img_data = JSON.parse(res1
									// 			.data);
									// 		if (img_data.code == 0) {
									// 			uni.showToast({
									// 				title: img_data
									// 					.msg,
									// 				duration: 1500,
									// 				icon: "error",
									// 			});
									// 			return;
									// 		}

									// 		var img = img_data.data.fullurl;
									// 		 this.tempList.push(img);
									// 	},
									// 	fail: () => {
									// 		uni.showToast({
									// 			title: "上传失败",
									// 			duration: 1500,
									// 			icon: "error",
									// 		});
									// 	},
									// });
								// });
							},
						});
					},
					fail: (err) => {
						console.log('err', err);
					}
				});
			},
			uploadImage(token, item, addsy_txt) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: `${baseUrl}api/common/upload`,
						name: "file",
						filePath: item,
						formData: {
							token: token,
							addsy_txt
						},
						success: (res1) => {
							let img_data = JSON.parse(res1
								.data);
							if (img_data.code == 0) {
								uni.showToast({
									title: img_data
										.msg,
									duration: 1500,
									icon: "error",
								});
								return;
							}
							
							var img = img_data.data.fullurl;
							resolve(img);
						},
						fail: (error) => {
							reject(error);
						},
					});
				});
			},
			// 保存图片
			handleSave() {
				uni.setStorageSync("statement-temp", this.tempList);
				uni.setStorageSync("statement-photo", this.photoList);
				uni.navigateBack({
					delta: 1,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.choose-page {
		background-color: #f7f8fb;
		box-sizing: border-box;
		min-height: 100vh;

		.choose-title {
			padding: 20rpx 32rpx;
			font-size: 28rpx;
			color: #e98d78;
			font-weight: 600;
			background: linear-gradient(86deg, #e28c8126 0%, #e28c8100 100%);
		}

		.image-box {
			padding: 20rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 20rpx;

			.image-item {
				height: 200rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;

				.check {
					position: absolute;
					top: 0;
					right: -10rpx;
					z-index: 2;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.confirm {
			width: 100%;
			height: 100rpx;
			background-color: #409eff;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 600;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);

			&:active {
				background-color: #4193e4;
			}
		}

		.add-image {
			position: fixed;
			right: 40rpx;
			bottom: 140rpx;
			background-color: #409eff;
			box-shadow: 0 0 10rpx #409eff;
			border-radius: 50%;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				opacity: 0.9;
			}
		}
	}
</style>